<template>
	<view class="pageAll">
		<view class="myInfo">
			<view class="myInfoLeft">
				<image :src="avatarPath" mode="aspectFill" />
			</view>
			<view class="myInfoRight">
				<text>{{nickname}}</text>
			</view>
		</view>
		<view class="cardGroup">
			<view hover-class="cardHover" @click="goPage(item.id)" class="card" v-for="(item,index) in cardList" :key="index">
				<label :for="'contactBtn'+item.id">
					<infoCard :iconPath="item.icon" :title="item.title" :messNum="item.num" />
				</label>
			</view>
			<button id="contactBtn2" open-type="contact"></button>
		</view>
	</view>
</template>

<script>
	import infoCard from '../../../components/message/infoCard.vue'
	let inter = null
	export default {
		data() {
			return {
				nickname: '',
				avatarPath: require('../../../static/report/foodReport.png'),
				cardList: [{
						id: 1,
						icon: require('../../../static/message/messageIcon.png'),
						title: '红标私信',
						num: null,
					},
					{
						id: 2,
						icon: require('../../../static/message/serviceIcon.png'),
						title: '联系客服',
						num: null,
					},
					{
						id: 3,
						icon: require('../../../static/message/userInfoIcon.png'),
						title: '用户信息',
						num: null,
					},
					{
						id: 4,
						icon: require('../../../static/message/aboutUsIcon.png'),
						title: '关于红标',
						num: null,
					},
				],
			}
		},
		computed:{
			messNum(){
				return this.$store.getters.getMessTip
			}
		},
		methods: {
			getMessageNum() {
				this.$api.getUserNewsCount({})
					.then(res => {
						if (res.status) {
							// 设置TabBarBadge
							uni.setTabBarBadge({
								index: 3,
								text: res.count + ''
							})
							this.$store.commit('setMessTip', res.count)
						} else {
							uni.removeTabBarBadge({
								index: 3
							})
							this.$store.commit('setMessTip', null)
						}
					})
			},
			goPage(value) {
				if (value === 1) {
					this.cardList[0].num = null
					uni.navigateTo({
						url: '../personalCommun/personalCommun'
					})
				} else if (value === 3) {
					uni.navigateTo({
						url: '../selfInfo/selfInfo'
					})
				} else if (value === 4) {
					uni.navigateTo({
						url: '../aboutUs/aboutUs'
					})
				}
			},
		},
		components: {
			infoCard,
		},
		watch:{
			messNum(newValue, oldValue) {
				this.$set(this.cardList[0], 'num', newValue)
			}
		},
		onShow() {
			this.$set(this.cardList[0], 'num', this.$store.getters.getMessTip)
			const userInfo = this.$store.getters.getUserInfo
			this.nickname = userInfo.username
			this.avatarPath = userInfo.avatar
			this.getMessageNum()
			// uni.removeTabBarBadge({
			// 	index: 3
			// })
		},
		onHide() {
		},
		onLoad() {
			this.$api.getUserMessage({})
				.then(res => {
					if (res.status) {
						this.$store.commit('setUserInfo', res.data)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1500,
						})
					}
				})
		},
		onShareAppMessage: (options) => {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "红标HONBIAO", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/indexPage/authorization/authorization', // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '/static/index/labelRouge.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj
		},
	}
</script>

<style scoped>
	.pageAll {
		box-sizing: border-box;
		background-color: #fdf5f3;
		width: 100%;
		height: 100%;
		padding: 17upx;
		display: inline-block;
	}

	.myInfo {
		padding: 17upx;
		border-radius: 10upx;
		background-color: #FFF;
		box-shadow: 0 0 30upx -15upx #f03d3d;
		display: flex;
		margin-bottom: 60upx;
	}

	.myInfoLeft {
		width: 25%;
		height: 146.66upx;
	}

	.myInfoLeft image {
		width: 146.66upx;
		height: 146.66upx;
		border-radius: 10upx;
	}

	.myInfoRight {
		padding-left: 10upx;
		display: flex;
		height: 146.66upx;
	}

	.myInfoRight text {
		margin: auto 0;
		color: #333333;
		font-weight: 300;
		font-size: 40upx;
	}

	.card {
		margin-bottom: 17upx;
	}
</style>
